<template>
    <div class="my-circles-panel">

        <div class="circles-container">
            <div v-if="loading && circles.length === 0" class="loading-state">
                <el-icon class="is-loading">
                    <Loading />
                </el-icon>
                <span>加载中...</span>
            </div>

            <template v-else>
                <div v-for="circle in circles" :key="circle.circle_id" class="my-circle-item">
                    <div class="circle-info" @click="goToCircleDetail(circle.circle_id)">
                        <div class="circle-name">{{ circle.name }}</div>
                        <div class="circle-type">{{ circle.type }}</div>
                        <div class="circle-description">{{ circle.description }}</div>
                        <div class="circle-stats">
                            <span class="member-count">{{ circle.member_count }} 成员</span>
                            <span class="post-count">{{ circle.post_count }} 帖子</span>
                        </div>
                    </div>
                    <div class="circle-actions">
                        <el-button type="primary" size="small" @click="goToCircleDetail(circle.circle_id)">
                            <el-icon>
                                <View />
                            </el-icon>
                            进入圈子
                        </el-button>
                        <el-button type="danger" size="small" @click="handleLeaveCircle(circle.circle_id)"
                            :loading="circle.leaving">
                            <el-icon>
                                <Close />
                            </el-icon>
                            退出圈子
                        </el-button>
                    </div>
                </div>

                <div v-if="circles.length === 0" class="empty-state">
                    <el-empty description="您还没有加入任何圈子" />
                </div>
            </template>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Close, Loading, View } from '@element-plus/icons-vue'
import { useCirclesStore } from '@/stores/circles'

const emit = defineEmits(['close', 'circle-updated'])

const router = useRouter()
const circlesStore = useCirclesStore()

const circles = ref([])
const loading = ref(false)

// 加载我的圈子
const fetchMyCircles = async () => {
    try {
        loading.value = true
        const response = await circlesStore.fetchUserCirclesAction()
        if (response.code === 0) {
            circles.value = response.data.list || response.data || []
            // 初始化加载状态
            circles.value.forEach(circle => {
                circle.leaving = false
            })
        } else {
            throw new Error(response.msg)
        }
    } catch (error) {
        console.error('加载我的圈子失败:', error)
        ElMessage.error('加载失败')
    } finally {
        loading.value = false
    }
}

// 退出圈子
const handleLeaveCircle = async (circleId) => {
    const circle = circles.value.find(c => c.circle_id === circleId)
    if (!circle) return

    try {
        await ElMessageBox.confirm('确定要退出这个圈子吗？', '提示', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
        })

        circle.leaving = true
        const response = await circlesStore.leaveCircleAction(circleId)
        if (response.code === 0) {
            // 从列表中移除
            circles.value = circles.value.filter(c => c.circle_id !== circleId)
            ElMessage.success('退出圈子成功')
            // 通知父组件更新
            emit('circle-updated')
        } else {
            throw new Error(response.msg)
        }
    } catch (error) {
        if (error !== 'cancel') {
            ElMessage.error('退出圈子失败：' + error.message)
        }
    } finally {
        circle.leaving = false
    }
}

// 进入圈子详情
const goToCircleDetail = (circleId) => {
    emit('close')
    router.push(`/circle-detail/${circleId}`)
}

// 关闭面板
const handleClose = () => {
    emit('close')
}

onMounted(() => {
    fetchMyCircles()
})
</script>

<style scoped>
.my-circles-panel {
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}

.panel-header h3 {
    margin: 0;
    color: #303133;
}

.circles-container {
    flex: 1;
    overflow-y: auto;
}

.my-circle-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 12px;
    border: 1px solid #e4e7ed;
}

.circle-info {
    flex: 1;
    cursor: pointer;
}

.circle-info:hover .circle-name {
    color: #1890ff;
}

.circle-name {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
    transition: color 0.3s;
}

.circle-type {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.circle-description {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.circle-stats {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #999;
}

.circle-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #999;
    gap: 8px;
}

.empty-state {
    padding: 40px 0;
    text-align: center;
}
</style>